<template>
  <view class="box">
    <!-- 导航条 -->
    <view style="height: 80px"></view>
    <view class="navbar">
      <text class="logo" @click="back">
        <uni-icons type="left" size="30"></uni-icons>
      </text>
      <text class="title">车辆管理</text>
      <!-- <text @click="drafts" class="caogao">导出</text> -->
    </view>
    <view v-for="(item, index) in list" :key="index" class="contain">
      <view class="contain_top">
        <view class="contain_top_left">
          <image
            style="width: 95%"
            :src="item.fileJsonVOS[0] ? item.fileJsonVOS[0].fileUrl : ''"
            mode="scaleToFill"
          />
        </view>
        <view class="contain_top_right">
          <view @click="changeStatus(item)" style="display: flex">
            车牌号：{{ item.carNumber }}
            <u-switch
              style="margin: 15rpx 0 0 18rpx"
              v-model="item.switchval"
              size="20"
            ></u-switch
          ></view>
          <view>所属部门：{{ getDriverDept(item.deptId) }}</view>
          <view
            >核载人数：{{ item.seats }}
            <text style="color: #70b603; padding-left: 10%">{{
              item.status == "1" ? "使用中" : "未分配"
            }}</text></view
          >
        </view>
      </view>
      <view class="contain_bottom">
        <u-button @click="open('sendcar', item)" class="btns" type="primary"
          >派车记录</u-button
        >
        <u-button @click="open('detail', item)" class="btn" type="primary"
          >详情</u-button
        >
        <u-button @click="open('edit', item)" class="btn" type="success"
          >编辑</u-button
        >
        <u-button @click="del(item)" class="btn" type="error">删除</u-button>
      </view>
    </view>
    <view style="height: 80px"></view>
    <view class="below">
      <u-button @click="add" type="primary">新增车辆</u-button>
    </view>

    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        cancelText="取消"
        confirmText="确定"
        title="删除确认"
        content="确定要删除该车辆吗？"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {
  getList,
  remove,
  deptList,
  changeStatus,
} from "@/api/vehiclemanagement";
export default {
  name: "MinirabbitAdd",

  data() {
    return {
      row: {},
      list: [],
      deptList: [],
      switchval: true,
    };
  },

  async onShow() {
    const res = await deptList();
    this.deptList = res.data[0].children;
    this.getList();
  },
  mounted() {},

  methods: {
    changeStatus(item) {
      const content = item.status == "1" ? "是否终止使用？" : "是否启动使用";
      uni.showModal({
        title: "提示",
        content,
        success: async (res) => {
          if (res.confirm) {
            await changeStatus(item);
            this.getList();
          } else if (res.cancel) {
          }
        },
      });
    },
    getDriverDept(val) {
      return this.deptList.find((item) => item.id === val)?.deptName;
    },
    async getList() {
      const res = await getList();
      this.list = res.data?.records;
      this.list.forEach((item) => {
        item.switchval = item.status == "1" ? true : false;
      });
    },
    async dialogConfirm() {
      await remove(this.row.id);
      this.getList();
      uni.showToast({
        title: "删除成功",
        duration: 1500,
      });
    },
    dialogClose() {},
    del(item) {
      this.row = item;
      this.$refs.alertDialog.open();
    },
    open(type, item) {
      const row = JSON.stringify(item);
      if (type === "detail") {
        //详情
        uni.navigateTo({
          url: `/pages/vehiclemanagement/vmdetail?row=${row}&deptList=${JSON.stringify(
            this.deptList
          )}`,
        });
      } else if (type === "edit") {
        //编辑
        uni.navigateTo({
          url: `/pages/vehiclemanagement/editvm?row=${row}`,
        });
      } else if (type === "sendcar") {
        //派车记录
        uni.navigateTo({
          url: `/pages/vehiclemanagement/sendcar?row=${row}`,
        });
      }
    },
    add() {
      uni.navigateTo({
        url: "/pages/vehiclemanagement/addvm",
      });
    },
    //导出按钮
    drafts() {},
    //返回按钮
    back() {
      const pageStack = getCurrentPages();
      if (pageStack.length > 1) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.switchTab({
          url: "/pages/index/index",
        });
      }
    },
    //提交按钮
    submit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          uni.showToast({
            title: `校验通过`,
          });
        })
        .catch((err) => {
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
}
.box {
  min-height: 100vh;
  position: relative;
  background-color: #f2f2f2;
}

.navbar {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-image: url("@/static/dispatch.png");
  .title {
    padding-left: 30%;
    font-size: 19px;
    font-weight: 600;
  }
  .caogao {
    color: #6f87f6;
    margin-left: 20%;
  }
}
.contain {
  width: 94%;
  height: 200px;
  border-radius: 10px;
  background-color: #fff;
  margin: 3%;

  .contain_top {
    width: 100%;
    height: 70%;
    display: flex;
    .contain_top_left {
      flex: 2;
    }
    .contain_top_right {
      flex: 3;
      line-height: 44px;
    }
  }
  .contain_bottom {
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: flex-end;
    margin-top: 5%;
    line-height: 60px;
  }
}
.btn,
.btns {
  width: 20%;
  height: 33px;
  border-radius: 5px;
}
.btns {
  width: 25%;
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 20px;
}
</style>